<template>
  <div>
    <p style="margin: 10px;">
      <el-button-group>
        <el-button
          size="mini"
          round
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="
        {
          addDrawerVisible = true;
          for (i in newEntityInfo) {
            newEntityInfo[i] = '';
          }
        }
      "
        >
          新增
        </el-button>
      </el-button-group>
    </p>

    <el-table
      :data="databaseInfo.laserInfos"
      stripe
    >
      <el-table-column label="减速区(mm)">
        <template slot-scope="scope">
          <el-tag>上{{ scope.row.decelerateUp }}</el-tag>
          <el-tag>下{{ scope.row.decelerateDown }}</el-tag>
          <el-tag>左{{ scope.row.decelerateLeft }}</el-tag>
          <el-tag>右{{ scope.row.decelerateRight }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        property="suspend"
        label="暂停区(前后左右 mm)"
      >
        <template slot-scope="scope">
          <el-tag>上{{ scope.row.suspendUp }}</el-tag>
          <el-tag>下{{ scope.row.suspendDown }}</el-tag>
          <el-tag>左{{ scope.row.suspendLeft }}</el-tag>
          <el-tag>右{{ scope.row.suspendRight }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        property="remark"
        label="备注"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            @click="deleteById(scope.row)"
            type="text"
            size="small"
          >
            删除
          </el-button>
          <el-button
            @click="
              {
                updateDrawerVisible = true;
                entityInfo = scope.row;
              }
            "
            type="text"
            size="small"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 激光方案新增页面 -->
    <el-drawer
      :visible.sync="addDrawerVisible"
      size="55%"
      :with-header="false"
      :append-to-body="true"
    >
      <div style="margin: 10px;">
        <el-button
          type="primary"
          size="mini"
          round
          icon="el-icon-edit"
          @click="insert(newEntityInfo)"
        >立即创建</el-button>
        <el-form
          ref="newEntityInfo"
          :model="newEntityInfo"
          label-width="80px"
          size="small"
          :rules="rules"
          :inline="true"
        >
          <el-divider content-position="left">暂停区 单位：mm</el-divider>
          <el-form-item
            label="上"
            prop="suspendUp"
          >
            <el-input v-model="newEntityInfo.suspendUp"></el-input>
          </el-form-item>
          <el-form-item
            label="下"
            prop="suspendDown"
          >
            <el-input v-model="newEntityInfo.suspendDown"></el-input>
          </el-form-item>
          <br>
          <el-form-item
            label="左"
            prop="suspendLeft"
          >
            <el-input v-model="newEntityInfo.suspendLeft"></el-input>
          </el-form-item>
          <el-form-item
            label="右"
            prop="suspendRight"
          >
            <el-input v-model="newEntityInfo.suspendRight"></el-input>
          </el-form-item>
          <el-divider content-position="left">减速区 单位：mm</el-divider>
          <el-form-item
            label="上"
            prop="decelerateUp"
          >
            <el-input v-model="newEntityInfo.decelerateUp"></el-input>
          </el-form-item>
          <el-form-item
            label="下"
            prop="decelerateDown"
          >
            <el-input v-model="newEntityInfo.decelerateDown"></el-input>
          </el-form-item>
          <br>
          <el-form-item
            label="左"
            prop="decelerateLeft"
          >
            <el-input v-model="newEntityInfo.decelerateLeft"></el-input>
          </el-form-item>
          <el-form-item
            label="右"
            prop="decelerateRight"
          >
            <el-input v-model="newEntityInfo.decelerateRight"></el-input>
          </el-form-item>
          <br>
          <el-form-item
            label="备注"
            prop="remark"
          >
            <el-input v-model="newEntityInfo.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="updateDrawerVisible"
      size="55%"
      :with-header="false"
      title="更新激光方案"
      :append-to-body="true"
    >
      <div style="margin: 10px;">
        <el-button
          type="primary"
          slot="title"
          size="mini"
          round
          :with-header="false"
          icon="el-icon-document-checked"
          @click="updateById(entityInfo)"
        >
          保存修改
        </el-button>
        <el-form
          ref="entityInfo"
          :model="entityInfo"
          label-width="80px"
          size="small"
          :rules="rules"
          :inline="true"
        >
          <el-divider content-position="left">暂停区 单位：mm</el-divider>
          <el-form-item
            label="上"
            prop="suspendUp"
          >
            <el-input v-model="entityInfo.suspendUp"></el-input>
          </el-form-item>
          <el-form-item
            label="下"
            prop="suspendDown"
          >
            <el-input v-model="entityInfo.suspendDown"></el-input>
          </el-form-item>
          <br>
          <el-form-item
            label="左"
            prop="suspendLeft"
          >
            <el-input v-model="entityInfo.suspendLeft"></el-input>
          </el-form-item>
          <el-form-item
            label="右"
            prop="suspendRight"
          >
            <el-input v-model="entityInfo.suspendRight"></el-input>
          </el-form-item>
          <el-divider content-position="left">减速区 单位：mm</el-divider>
          <el-form-item
            label="上"
            prop="decelerateUp"
          >
            <el-input v-model="entityInfo.decelerateUp"></el-input>
          </el-form-item>
          <el-form-item
            label="下"
            prop="decelerateDown"
          >
            <el-input v-model="entityInfo.decelerateDown"></el-input>
          </el-form-item>
          <br>
          <el-form-item
            label="左"
            prop="decelerateLeft"
          >
            <el-input v-model="entityInfo.decelerateLeft"></el-input>
          </el-form-item>
          <el-form-item
            label="右"
            prop="decelerateRight"
          >
            <el-input v-model="entityInfo.decelerateRight"></el-input>
          </el-form-item>
          <br>
          <el-form-item
            label="备注"
            prop="remark"
          >
            <el-input v-model="entityInfo.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import api from "@/utils/api";
export default {
  name: "Laser",
  props: ["databaseInfo"],
  data() {
    return {
      addDrawerVisible: false,
      updateDrawerVisible: false,
      entityInfo: {
        decelerateUp: "",
        decelerateDown: "",
        decelerateLeft: "",
        decelerateRight: "",
        suspendUp: "",
        suspendDown: "",
        suspendLeft: "",
        suspendRight: "",
        remark: "",
      },
      newEntityInfo: {
        decelerateUp: "",
        decelerateDown: "",
        decelerateLeft: "",
        decelerateRight: "",
        suspendUp: "",
        suspendDown: "",
        suspendLeft: "",
        suspendRight: "",
        remark: "",
      },
      rules: {
        decelerateUp: [
          { required: true, message: "请输入减速区上", trigger: "blur" },
        ],
        decelerateDown: [
          { required: true, message: "请输入减速区下", trigger: "blur" },
        ],
        decelerateLeft: [
          { required: true, message: "请输入减速区左", trigger: "blur" },
        ],
        decelerateRight: [
          { required: true, message: "请输入减速区右", trigger: "blur" },
        ],
        suspendUp: [
          { required: true, message: "请输入暂停区上", trigger: "blur" },
        ],
        suspendDown: [
          { required: true, message: "请输入暂停区下", trigger: "blur" },
        ],
        suspendLeft: [
          { required: true, message: "请输入暂停区左", trigger: "blur" },
        ],
        suspendRight: [
          { required: true, message: "请输入暂停区右", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
          {
            min: 1,
            max: 255,
            message: "长度在 1 到 255 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.refreshList();
  },
  watch: {
    databaseInfo: {
      handler() {
        this.refreshList();
      },
      deep: true,
    },
  },
  methods: {
    refreshList() {
      this.databaseInfo.laserInfos.forEach((e) => {
        e.decelerate = `◾${e.decelerateUp} ◾${e.decelerateDown} ◾${e.decelerateLeft} ◾${e.decelerateRight}`;
        e.suspend = `◾${e.suspendUp} ◾${e.suspendDown} ◾${e.suspendLeft} ◾${e.suspendRight}`;
      });
    },
    // 删除
    deleteById(entity) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          api.laserInfoDeleteById(entity).then(() => {
            this.$message({
              message: "删除激光方案成功！",
              type: "success",
            });
            this.$emit("getAllDataBaseInfo");
          });
        })
        .catch((e) => e);
    },
    // 新增
    insert(entity) {
      this.$refs["newEntityInfo"].validate((valid) => {
        if (valid) {
          api
            .laserInfoInsert(entity)
            .then(() => {
              this.addDrawerVisible = false;
              this.$message({
                message: "新增激光方案成功！",
                type: "success",
              });
              this.$emit("getAllDataBaseInfo");
            })
            .catch(() => {
              this.$message({
                message: "新增激光方案失败！",
                type: "error",
              });
            });
        }
      });
    },
    // 更新
    updateById(entity) {
      this.$refs["entityInfo"].validate((valid) => {
        if (valid) {
          api
            .laserInfoUpdateById(entity)
            .then(() => {
              this.updateDrawerVisible = false;
              this.$message({
                message: "更新激光方案成功！",
                type: "success",
              });
              this.$emit("getAllDataBaseInfo");
            })
            .catch(() => {
              this.$message({
                message: "更新激光方案失败！",
                type: "error",
              });
            });
        }
      });
    },
  },
};
</script>

<style>
</style>